<template>
  <div class="micro-tab-nav-box">
    <!--预览控制区-->
    <div class="previewStyle" :style="{background: formData.bg_color,paddingTop: formData.marginTop/2 + 'px', paddingBottom: formData.marginBottom/2 + 'px'}">
      <div>
        <el-carousel :height="swiperHeight" :autoplay="autoSlide" indicator-position="none" @change="swiperChange">
          <el-carousel-item v-for="(item,index) in showNav" v-show="item&&item.length" :key="index">
            <div>
              <div class="dis" :class="{flex_w: formData.lineNum === '2'}">
                <div v-for="(navItem,navIndex) in item" v-show="navIndex < (formData.cols*formData.lineNum)" :key="navIndex" class="dis flex_d dis_ju al_item" :class="{item_padd: formData.lineNum == '2'&&formData.type != '1'&&navIndex < formData.cols}" :style="{width: (100/formData.cols) + '%'}">
                  <img v-show="formData.type === '0'&&navItem.img" fit="fill" :style="{width: formData.imageSize/2 + 'px',height: formData.imageSize/2 + 'px'}" :src="navItem.img" alt="">
                  <div v-show="formData.type === '0'&&!navItem.img" class="emptyImg" :style="{width: formData.imageSize/2 + 'px',height: formData.imageSize/2 + 'px'}" />
                  <div class="titleText" :style="{color: formData.textColor}">{{ navItem.title }}</div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div v-show="autoSlide" class="indicatorBox dis dis_ju al_item">
          <div class="dis dotWrap">
            <div v-for="(dotItem,dotIndex) in showNav.length" :key="dotIndex" class="dotItem">
              <div class="wh100e dot" :class="{activeDot: swiperActive == dotIndex}" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">图文导航</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.lineNum" style="width: 100%;">
              <el-radio-button label="1">一行</el-radio-button>
              <el-radio-button label="2">两行</el-radio-button>
            </el-radio-group>
          </div>
          <el-tabs v-model="tabActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="dis dis_ju_spb al_item contentTitle">
                <div class="font_w">选择模板</div>
                <el-radio-group v-model="formData.type" size="mini">
                  <el-radio label="0" border>图片导航</el-radio>
                  <el-radio label="1" border>文字导航</el-radio>
                </el-radio-group>
              </div>
              <div class="dis dis_ju_spb al_item contentTitle">
                <div class="font_w">选择列数</div>
                <el-radio-group v-model="formData.cols" size="mini">
                  <el-radio-button label="4">一行四列</el-radio-button>
                  <el-radio-button label="5">一行五列</el-radio-button>
                </el-radio-group>
              </div>
              <div v-show="formData.nav.length >= 8" class="dis dis_ju_spb al_item contentTitle">
                <div class="font_w">滑动播放</div>
                <el-radio-group v-model="formData.slideFlag" size="mini">
                  <el-radio-button label="1">打开</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
              <div class="tab-nav-set">
                <!-- 配置-->
                <draggable v-model="formData.nav">
                  <transition-group>
                    <div v-for="(item,index) in formData.nav" :key="item.id" class="tab-nav-set-item">
                      <div class="set-box dis al_item">
                        <!--图片-->
                        <div v-show="formData.type === '0' " class="set-image" :style="{backgroundImage:'url('+item.img+')'}" @click="choosePage(index,'img')">
                          <span v-if="!item.img">+</span>
                          <div class="set-image-add">{{ item.img?'更改图片':'添加图片' }}</div>
                        </div>
                        <!-- 标题信息-->
                        <div class="set-info">
                          <!-- v-if="item.id" -->
                          <div class="set-item-title dis al_item">
                            <span>标题：</span>
                            <div class="inp_left">
                              <el-input v-model="item.title" style="width:240px;" maxlength="8" size="mini" placeholder="标题" />
                            </div>
                          </div>
                          <div class="set-item-title choose-micro show dis al_item">
                            <span>跳转链接：</span>
                            <div class="inp_left">
                              <el-button type="text" size="mini" @click="choosePage(index)"><span v-if="item.microType" class="typeName">{{ item.microType }}</span>{{ item.microTitle ||'点击选择' }}
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <span class="set-close el-icon-circle-close" @click="formData.nav.splice(index,1)"></span>
                    </div>
                  </transition-group>
                </draggable>
                <div class="tab-nav-add" @click="addNav">增加导航</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>图片尺寸</span>
                      <span class="text_mar">{{ formData.imageSize }}px</span>
                    </div>
                    <el-radio-group v-model="formData.imageSize" size="small">
                      <el-radio-button label="60">小</el-radio-button>
                      <el-radio-button label="80">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>文字颜色</span>
                      <span class="text_mar">{{ formData.textColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker
                        v-model="formData.textColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>背景颜色</span>
                      <span class="text_mar">{{ formData.bg_color }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(2)">重置</div>
                      <el-color-picker
                        v-model="formData.bg_color"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <!-- 选择商品 -->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="已上架商品"
      :visible.sync="dialogChooseGoods"
      width="70%"
    >
      <div class="dialog-content">
        <chooseGoods :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--选择微页面-->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="微页面"
      :visible.sync="dialogChoosePages"
      width="42%"
    >
      <div class="choose-goods-compent">
        <choose-feature
          :is-get-choose-data="isGetChooseFeature"
          @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--我的图片-->
    <chooseImages
      ref="pics"
      :can-choose-images-num="canChooseImagesNum"
      :max="canChooseImagesNum"
      @chooseImagesEnd="chooseImagesEnd"
      @getUrl="getPicsUrl"
    />
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
